<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
      *{
        margin: 0;
        padding: 0;
        box-sizing: border-box;

      }
      .app{
        /*width: 300px;*/
        /*height: 300px;*/
        /*background: url("https://bucket-yufei.oss-cn-beijing.aliyuncs.com/my_self/image/01.jpeg");*/
        /*background-size: cover;*/
        padding: 1em;
        border: 16px solid transparent;/*将边框透明化*/
        /*background: linear-gradient(white,white);*/
        /*background-size: cover;*/
        /*background-clip: padding-box, border-box;*/

        /**
          分析border-image 16为边框分布的大小 一般和border的宽度一致
          关于选择多少度的问题,这个书上没事,但是如果度数没有调整好的话,就会出现一种模糊的感觉
          接下来就是图像的周期了,红+透密+蓝色+透明为一个周期
          这种方法最大的权限是数值不易控制,一个数值的变化,需要四处修改.
         */
        border-image: 16 repeating-linear-gradient(-45deg, red 0,red 1em,
        transparent 0, transparent 2em,
        #58a 0, #58a 3em,
        transparent 0, transparent 4em
        );


      }
      /*.app div{*/
      /*  background: white;*/
      /*  !*撑大子盒子，方可看见其效果*!*/
      /*  padding: 1em;*/
      /*}*/


      @keyframes myMove {
        to {
          background-position: 100%;
        }
      }
      .app2 {
      /**
            ok,接下来我们开始用一个比较高级的应用
            蚂蚁行军蚁边框(带动画的哦)

         */

        padding: 1em;
        border: 1px solid transparent;
        /*关于背景 linear-gradient的知识
          首先这是一个渐变效果的函数,其构成后为图片 属于image类型
          其格式为 linear-gradient(color company)

          repeating-linear-gradient的知识
          和上一个函数类似,只不过这个函数可以重复进行
        */
        background: linear-gradient(white,white) padding-box,
        repeating-linear-gradient(-45deg,black 0,black 25%,white 0, white 50%) 0/.6em .6em;
        /*animation: myMove 12s linear infinite;!*执行动画*!*/

      }
    </style>
</head>
<body>
<!--
 在css中边框不仅可以使用纯色，也可以使用图片
 我们还可以让这个元素的尺寸扩大，缩小。
 这里我们就需要了解一个css属性 border-image
 border时如何运行的？
 九宫格伸缩法，把图片割成9块，然后把他们应用到元素边框相应的边和角



 -->
  <div class="app">
    123
  </div>

  <div class="app2">
    Hello World!
  </div>

</body>
</html>
